<template>
  <section class="my-order">
    <div class="inner">
      <div class="tabs-content">
          <div class="title">
            <ul>
              <li>订单信息</li>
              <li style="display: none">预约价格</li>
              <li>支付金额</li>
              <li>
                <Dropdown  @on-click="select">
                  <a href="javascript:void(0)">
                    订单状态
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="0">全部</DropdownItem>
                    <DropdownItem name="1">待付款</DropdownItem>
                    <DropdownItem name="2">待发货</DropdownItem>
                    <DropdownItem name="6">已收货</DropdownItem>
                    <DropdownItem name="8">待收货</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </li>
              <li>操作</li>
            </ul>
        </div>
        <div class="order-list" v-if="show ===true">
          <order-item :listinfo="i" v-for="i in list" :key="i.id" :text="text" :width="20" :status="1"></order-item>
        </div>
        <div class="page-container" v-if="show ===true">
          <Page :total="num" @on-change="pab" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import OrderItem from '../../../components/ListItem/OrderItem'
export default {
  name: 'PersonalMsg',
  components: {
      OrderItem
  },
   data () {
      return {
        selected: 0,
        list: [],
        // type:'',
        show:true,
        text:'',
          num:0,
          page:1
      }
   },
    created () {
      this.init()
    },
    methods: {
        pab (page) {
            this.page = page
            this.getinfo()
        },
      select (name) {
          this.selected = name
          this.init()
        },
      init() {
          let _this = this
          _this.$post('/api/shop/myOrderList',
              {
                  token:_this.$token,
                  status:_this.selected,
                  page:_this.page,
                  num:10
              },function (res) {
                  _this.list = res.data
                  _this.num = parseInt(res.data.length)
                  _this.list.forEach(function (i) {
                      _this.$set(i,'type', 1);
                      // _this.type =i.type
                      _this.show = true
                      if(i.status == 1){
                          _this.$set(i,'text','待付款');
                      }else if(i.status == 2){
                          _this.$set(i,'text','待发货');
                      }else if(i.status == 8){
                          _this.$set(i,'text','待收货');
                      }else if(i.status == 6){
                          _this.$set(i,'text','已收货');
                      }else {
                          _this.$set(i,'text','');
                      }
                  })
              },function (err,errmsg,errcode) {
                  _this.$message.error(errmsg);
                  _this.length = err
                  if(_this.length===0){
                      _this.show = false
                  }

              }
          )
      },
    }
}
</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .my-order {
    .inner {
      border: 1px solid @border-color;
      .order-list{
        padding: 15px;
      }
      .tab {
        border: 1px solid @border-color;
        border-bottom: 0;
        background-color: #f5f5f5;
        &:after {
          display: block;
          clear: both;
          content: "";
          visibility: hidden;
          height: 0;
        }
        .tab-item {
          float: left;
          width: 25%;
          height: 43px;
          line-height: 43px;
          text-align: center;
          color: #666;
          background-color: #f5f5f5;
          border-right: 1px solid @border-color;
          border-bottom: 1px solid @border-color;
          position: relative;
          cursor: pointer;
          &:last-child {
            border-right-color: transparent;
          }
        }
        .tab-item.active {
          border-bottom-color: transparent;
          background-color: #fff;
          color: @theme-color;
          &:before {
            content: '';
            width: 100%;
            height: 3px;
            background-color: @theme-color-dark;
            position: absolute;
            top: -1px;
            left: 0;
          }
        }
      }
      .tabs-content {
        >.title{
          width: 698px;
          height: 43px;
          background-color: #f5f5f5;
          border-bottom: solid 1px #e0e0e0;
          border-top: 2px solid @theme-color-dark;
          >ul{
            >li{
              float: left;
              line-height: 43px;
              text-align: center;
              font-size: 12px;
              color: #666666;
              width: 16%;
              a{
                color:#666666 ;
              }
            }
            >:first-child{
              width: 47%;
            }
            >:nth-child(3){
              width: 18%;
            }
          }
        }
      }
    }
  }
</style>
